<template>
    <div class="configuration_area"
         @drop="dropHandler"
         @dragover="(e) => e.preventDefault()"
    >
        <VueDiagram
                v-if="configurationMode === 'index'"
                divClassName='vue-diagram'
                :initDiagram="initDiagram"
                :nodeDataArray="nodeDataArray"
                :linkDataArray="linkDataArray"
                :modelData="modelData"
                @modelChange="handleModelChange"
        ></VueDiagram>
        <Plot v-if="configurationMode === 'plot'"></Plot>
        <Three3D v-if="configurationMode === 'three'"></Three3D>
        <IndexProperty class="property"></IndexProperty>
        <IndexPropertyInfinitePowerSupply class="property"></IndexPropertyInfinitePowerSupply>
        <IndexPropertyPcs class="property"></IndexPropertyPcs>
        <IndexPropertyEsBattery class="property"></IndexPropertyEsBattery>
        <IndexPropertyThreeWindingTransformer class="property"></IndexPropertyThreeWindingTransformer>
        <IndexPropertyAcBreaker class="property"></IndexPropertyAcBreaker>
        <IndexPropertyDcBreaker class="property"></IndexPropertyDcBreaker>
        <IndexPropertyEsAlternativeNode class="property"></IndexPropertyEsAlternativeNode>
        <IndexPropertyCrossPoint class="property"></IndexPropertyCrossPoint>
        <IndexPropertyAcBus class="property"></IndexPropertyAcBus>
        <IndexPropertyDcBus class="property"></IndexPropertyDcBus>


        <div class="configuration_area-tag">
            {{
            configurationMode === 'index' ? '绘制区域':
            configurationMode === 'plot' ? '图表区域':
            configurationMode === 'three' ? '3D模型':
            ''
            }}
        </div>
    </div>
</template>

<script>
  import IndexProperty from './IndexProperty';
  import IndexPropertyInfinitePowerSupply from './IndexPropertyInfinitePowerSupply';
  import IndexPropertyPcs from './IndexPropertyPcs';
  import IndexPropertyEsBattery from './IndexPropertyEsBattery';
  import IndexPropertyThreeWindingTransformer from './IndexPropertyThreeWindingTransformer';
  import IndexPropertyAcBreaker from './IndexPropertyAcBreaker';
  import IndexPropertyDcBreaker from './IndexPropertyDcBreaker';
  import IndexPropertyEsAlternativeNode from './IndexPropertyEsAlternativeNode';
  import IndexPropertyCrossPoint from './IndexPropertyCrossPoint';
  import IndexPropertyAcBus from './IndexPropertyAcBus';
  import IndexPropertyDcBus from './IndexPropertyDcBus';
  import Plot from './plot';
  import Three3D from './three3D';

  import {VueDiagram} from '../../utils/gojs-vue'
  // import {VueDiagram} from 'gojs-vue'
  import {mapState} from 'vuex';

  export default {
    name: "IndexConfiguration",
    components: {IndexProperty,
    IndexPropertyInfinitePowerSupply,
    IndexPropertyPcs,
    IndexPropertyEsBattery,
    IndexPropertyThreeWindingTransformer,
    IndexPropertyAcBreaker,
    IndexPropertyDcBreaker,
    IndexPropertyEsAlternativeNode,
    IndexPropertyCrossPoint,
    IndexPropertyAcBus,
    IndexPropertyDcBus,
      Plot,
      Three3D,
    VueDiagram},
    data() {
      return {}
    },
    computed: {
      ...mapState([
        'nodeDataArray',
        'linkDataArray',
        'modelData',
        'configurationMode'
      ])
    },
    methods: {
      initDiagram() {
        const that = this;
        const $ = go.GraphObject.make;
        const diagram = $(go.Diagram, {
          'undoManager.isEnabled': true,
          "grid.visible": true,
          "grid.gridCellSize": new go.Size(20, 20),
          "commandHandler.copiesTree": true,
          "commandHandler.deletesTree": true,
          "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
          "toolManager.hoverDelay": 100,
          model: $(go.GraphLinksModel, {
            linkKeyProperty: 'key'
          }),
          // layout: $(go.TreeLayout, { angle: 0 })
        });
        diagram.nodeTemplate = $(
          go.Node,
          'Vertical',
          {
            doubleClick:  // here the second argument is this object, which is this Node
              function (e, node) {
                let key = node.data.key;
                that.$store.commit('openProperty', key)
              }
          },
          $(go.Panel,
            'Auto',
            $(go.Shape,
              "RoundedRectangle", {
                strokeWidth: 1,
                portId: '',
                fill: '#ffffff',
                fromLinkable: true,
                toLinkable: true,
                cursor: 'pointer'
              }, new go.Binding()),
            $(go.Picture, {
              margin: 10,
              width: 50,
              height: 50,
            }, new go.Binding('source')),
          ),
          $(go.TextBlock, {
            margin: 8,
            font: 'bold 14px sans-serif',
            stroke: '#333',
          }, new go.Binding('text', 'key'))
        )

        diagram.linkTemplate = $(go.Link,
          {routing: go.Link.Orthogonal, corner: 5},
          new go.Binding('relinkableFrom', 'canRelink').ofModel(),
          new go.Binding('relinkableTo', 'canRelink').ofModel(),
          $(go.Shape),
          $(go.Shape, {toArrow: 'Standard'})
        )

        return diagram
      },
      handleModelChange(data) {
        const removedNodeKeys = data.removedNodeKeys
        const insertedLinkKeys = data.insertedLinkKeys
        const modifiedLinkData = data.modifiedLinkData
        const removedLinkKeys = data.removedLinkKeys

        if (removedNodeKeys) {
          this.$store.commit('removeElement', removedNodeKeys)
          this.$store.commit('addLog', '删除节点')
        }

        if (modifiedLinkData) {
          // 增加链接
          // [{from: "火力发电", key: -1, to: "光伏"}]
          this.$store.commit('linkElementToOther', modifiedLinkData)
          this.$store.commit('addLog', `连接 ${modifiedLinkData[0].from} 与 ${modifiedLinkData[0].to}`)
        }


        if (removedLinkKeys) {
          this.$store.commit('removeLinkElement', removedLinkKeys)
          this.$store.commit('addLog', '删除连接线')
        }
        // ... make state changes
      },
      dropHandler(e) {
        let selectedUUID = this.$store.state.selectedUUID;
        let treeContent = this.$store.state.treeContent;
        if (!selectedUUID || treeContent[selectedUUID].type !== 'file') {
          this.$Message['info']({
            background: false,
            content: '请选中要修改的文件'
          });

          return
        }
        let key = e.dataTransfer.getData("key");
        this.$store.commit('addElementToCanvas', this.$store.state.toolsContent[key])
        this.$store.commit('addLog', `增加节点${key}`)
      }
    }
  }
</script>

<style scoped lang="scss">
    .configuration_area {
        position: relative;
        width: 100%;
        height: 70%;

        .gojs-diagram {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .property {
            position: absolute;
            right: 0;
            top: 0;
        }

        .configuration_area-tag {
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            padding: 2px;
            margin-left: 6px;
            justify-content: flex-start;
            align-items: center;
            -webkit-box-shadow: inset 0 1px 0 0 #fff;
            -moz-box-shadow: inset 0 1px 0 0 #fff;
            box-shadow: inset 0 1px 0 0 #fff;
            background-color: #f5f5f5;
            background-image: linear-gradient(to bottom, #f5f5f5, #eee);
            border: 1px solid #aaaaaa;
            z-index: 200;
        }
    }

    .plotArea {
        flex: 1;
    }
</style>
